<template>
	<view class="goods" :style="goodstyle">
		<scroll-view scroll-x v-if="mydata.show_type == 'scroll'" :class="calssName">
			<view style="display: flex;">
				<view v-for="(item, i) in list" :key="i" v-if="i < mydata.limit" class="good-box" :style="mydata.list_type == 'list' ? itemstyle : ''">
					<view class="good-box-item" :style="itemstyle" @click.stop="todetial(item)">
						<view class="img-box">
							<view class="good-img-box">
								<easy-loadimage
									:borderradius="mydata.r_t"
									:imgstyle="'border-radius:' + mydata.r_t + 'rpx ' + mydata.r_t + 'rpx 0 0'"
									:sellout="item.sellout"
									:image-src="item.master"
									imgstyle=""
								></easy-loadimage>
							</view>
							<text class="title" v-if="mydata.list_type != 'list'" :style="'color:' + mydata.t_color">{{ item.goods_name }}</text>
						</view>
						<view v-if="mydata.list_type != 'list'" class="box-bottom">
							<view class="price">
								<text v-if="mydata.pro_price.show" class="pro-price" :style="'color:' + mydata.pro_price.color">
									<block v-if="item.p_type == '2'">
										<text class="txt">{{ item.sell_price }}</text>
										积分
									</block>
									<block v-else>
										￥
										<text class="txt">{{ item.sell_price }}</text>
									</block>
								</text>
								<view class="vip-price" v-if="item.now_level_price > 0">
									<text class="vip-name">会员价</text>
									<text>￥{{ item.now_level_price }}</text>
								</view>
								<text v-if="item.now_level_price == 0 && mydata.del_price.show" class="del-price" :style="'color:' + mydata.del_price.color">
									<text class="del-icon">{{ mydata.del_price.title ? mydata.del_price.title + ':' : '' }}</text>
									<text class="del-num">￥{{ item.original_price }}</text>
								</text>
							</view>
							<view class="btn">
								<text @click.stop="gotrolley(item)" v-if="mydata.add_button && mydata.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
									<text :style="'font-size:40rpx;color:' + mydata.add_button.color + ';'" :class="mydata.add_button.icon + ' iconfont'"></text>
								</text>
								<text v-if="mydata.sales_num.show" class="sales-num" :style="'color:' + mydata.sales_num.color">
									{{ mydata.sales_num.title || '销量' }}:{{ item.sell + (item.is_virtual ? item.virtual_sell : 0) }}
								</text>
							</view>
						</view>
						<view v-if="mydata.list_type == 'list'" class="right van-hairline--bottom">
							<view>
								<text class="title" :style="'color:' + mydata.t_color">{{ item.goods_name }}</text>
								<text class="subtitle">{{ item.subtitle }}</text>
							</view>
							<view class="right-bottom">
								<view class="price">
									<text v-if="mydata.pro_price.show" class="pro-price" :style="'color:' + mydata.pro_price.color">
										<block v-if="item.p_type == '2'">
											<text class="txt">{{ item.sell_price }}</text>
											积分
										</block>
										<block v-else>
											￥
											<text class="txt">{{ item.sell_price }}</text>
										</block>
									</text>
									<view class="vip-price" v-if="item.now_level_price > 0">
										<text class="vip-name">会员价</text>
										<text>￥{{ item.now_level_price }}</text>
									</view>
									<text v-if="item.now_level_price == 0 && mydata.del_price.show" class="del-price" :style="'color:' + mydata.del_price.color">
										<text class="del-icon">{{ mydata.del_price.title ? mydata.del_price.title + ':' : '' }}</text>
										<text class="del-num">￥{{ item.original_price }}</text>
									</text>
								</view>
								<view class="btn">
									<text @click.stop="gotrolley(item)" v-if="mydata.add_button && mydata.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
										<text :style="'font-size:40rpx;color:' + mydata.add_button.color + ';'" :class="mydata.add_button.icon + ' iconfont'"></text>
									</text>
									<text v-if="mydata.sales_num.show" class="sales-num" :style="'color:' + mydata.sales_num.color">
										{{ mydata.sales_num.title || '销量' }}:{{ item.sell + (item.is_virtual ? item.virtual_sell : 0) }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-else :class="calssName">
			<view v-for="(item, i) in list" :key="i" v-if="i < mydata.limit" class="good-box" :style="mydata.list_type == 'list' ? itemstyle : ''">
				<view class="good-box-item" :style="itemstyle" @click.stop="todetial(item)">
					<view class="img-box">
						<view class="good-img-box" v-if="mydata.list_type == 'two' || mydata.list_type == 'three'" :style="'height:' + height + 'px'">
							<easy-loadimage :sellout="item.sellout" :image-src="item.master" :borderradius="mydata.r_t"></easy-loadimage>
						</view>
						<view class="good-img-box" v-else><easy-loadimage :sellout="item.sellout" :image-src="item.master" :borderradius="mydata.r_t"></easy-loadimage></view>

						<text class="title" v-if="mydata.list_type != 'list'" :style="'color:' + mydata.t_color">{{ item.goods_name }}</text>
					</view>
					<view v-if="mydata.list_type != 'list'" class="box-bottom">
						<view class="price">
							<text v-if="mydata.pro_price.show" class="pro-price" :style="'color:' + mydata.pro_price.color">
								<block v-if="item.p_type == '2'">
									<text class="txt">{{ item.sell_price }}</text>
									积分
								</block>
								<block v-else>
									￥
									<text class="txt">{{ item.sell_price }}</text>
								</block>
							</text>
							<view class="vip-price" v-if="item.now_level_price > 0">
								<text class="vip-name">会员价</text>
								<text>￥{{ item.now_level_price }}</text>
							</view>
							<text v-if="item.now_level_price == 0 && mydata.del_price.show" class="del-price" :style="'color:' + mydata.del_price.color">
								<text class="del-icon">{{ mydata.del_price.title ? mydata.del_price.title + ':' : '' }}</text>
								<text class="del-num">￥{{ item.original_price }}</text>
							</text>
						</view>
						<view class="btn">
							<text @click.stop="gotrolley(item)" v-if="mydata.add_button && mydata.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
								<text :style="'font-size:40rpx;color:' + mydata.add_button.color + ';'" :class="mydata.add_button.icon + ' iconfont'"></text>
							</text>
							<text v-if="mydata.sales_num.show" class="sales-num" :style="'color:' + mydata.sales_num.color">
								{{ mydata.sales_num.title || '销量' }}:{{ item.sell + (item.is_virtual ? item.virtual_sell : 0) }}
							</text>
						</view>
					</view>
					<view v-if="mydata.list_type == 'list'" class="right van-hairline--bottom">
						<view>
							<text class="title" :style="'color:' + mydata.t_color">{{ item.goods_name }}</text>
							<text class="subtitle">{{ item.subtitle }}</text>
						</view>
						<view class="right-bottom">
							<view class="price">
								<text v-if="mydata.pro_price.show" class="pro-price" :style="'color:' + mydata.pro_price.color">
									<block v-if="item.p_type == '2'">
										<text class="txt">{{ item.sell_price }}</text>
										积分
									</block>
									<block v-else>
										￥
										<text class="txt">{{ item.sell_price }}</text>
									</block>
								</text>
								<text v-if="mydata.del_price.show" class="del-price" :style="'color:' + mydata.del_price.color">
									<text class="del-icon">{{ mydata.del_price.title ? mydata.del_price.title + ':' : '' }}</text>
									<text class="del-num">￥{{ item.original_price }}</text>
								</text>
							</view>
							<view class="btn">
								<text @click.stop="gotrolley(item)" v-if="mydata.add_button && mydata.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
									<text :style="'font-size:40rpx;color:' + mydata.add_button.color + ';'" :class="mydata.add_button.icon + ' iconfont'"></text>
								</text>
								<text v-if="mydata.sales_num.show" class="sales-num" :style="'color:' + mydata.sales_num.color">
									{{ mydata.sales_num.title || '销量' }}:{{ item.sell + (item.is_virtual ? item.virtual_sell : 0) }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	data() {
		return {
			scrollviewHigh: 667,
			list: [],
			cid: 0,
			height: 0
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	watch: {
		g_id() {
			this.getlist();
		}
	},
	computed: {
		calssName() {
			// let class=''
			return 'goods-list ' + this.mydata.show_type + ' ' + this.mydata.list_type;
		},
		itemstyle() {
			return 'background:' + this.mydata.bg + ';border-radius:' + this.mydata.r_t + 'rpx ' + this.mydata.r_t + 'rpx ' + this.mydata.r_b + 'rpx ' + this.mydata.r_b + 'rpx ';
		},
		goodstyle() {
			return 'padding: ' + this.mydata.p_t + 'rpx ' + this.mydata.p_lr + 'rpx ' + this.mydata.p_b + 'rpx';
		},
		...mapState({
			g_id: state => state.g_id
		})
	},
	created() {
		this.getlist();
	},

	methods: {
		getElementHeight(element) {
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec(res => {
					if (!res) {
						//如果没获取到，再调一次
						this.getElementHeight('.good-box');
					} else {
						let arr = res[0];
						if (arr[0]) {
							this.height = arr[0].width - 4;
						}
					}
				});
			}, 20);
		},

		getlist() {
			let list = this.mydata.list;
			let cids = [];
			let type = !list[0].type ? 1 : list[0].type;
			list.forEach(a => {
				if (a.id) {
					cids.push(a.id);
				}
			});
			this.$http(
				'/goods/getManyGoods',
				{
					cids: JSON.stringify(cids),
					type: type
				},
				'POST'
			).then(res => {
				if (res.statusCode == 200) {
					let list = res.data.msg;
					list.forEach(a => {
						a.p_type = type;
						a.sellout = !(a.sell - a.total);
						if (a.sku && a.sku.length > 0) {
							a.now_level_price = util.getminprice(a.sku);
						} else {
							if (a.level_price) {
								a.now_level_price = util.getprice(a);
							}
						}
					});
					this.list = list;
					if (this.mydata.show_type == 'block' && (this.mydata.list_type == 'two' || this.mydata.list_type == 'three')) {
						this.getElementHeight('.good-box');
					}
				} else {
				}
			});
		},
		gotrolley(item) {
			let data = {
				show: true,
				id: item.id,
				type: item.p_type
			};
			this.$store.commit('settrolley', data);
		},
		todetial(item) {
			if (item.p_type == '2') {
				this.Jumpurl({
					type: 1,
					link: '../goods/detail?id=' + item.id
				});
			} else {
				this.Jumpurl({
					type: 2,
					id: item.id
				});
			}
		}
	}
};
</script>

<style lang="scss">
.uni-scroll-view-content {
	display: flex;
}

.goods {
	width: 100%;
	overflow: auto;
	padding: 16rpx 24rpx 0;
	box-sizing: border-box;

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		overflow: auto;
		min-width: 100%;
		box-sizing: border-box;
		padding-left: 0;

		.good-box {
			flex-shrink: 0;
			overflow: hidden;

			.good-box-item {
				overflow: hidden;
			}

			.img-box {
				overflow: hidden;
				position: relative;

				.good-img-box {
					position: relative;
					overflow: hidden;

					.good-img {
						width: 100%;
						display: block;
					}
				}
			}

			.title {
				width: 100%;
				box-sizing: border-box;
				color: #212121;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 28rpx;
				line-height: 40rpx;
				height: 80rpx;
				padding: 0 16rpx;
				margin: 16rpx 0 8rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.box-bottom {
				width: 100%;
				display: flex;
				box-sizing: border-box;
			}

			.btn {
				display: flex;
				flex-direction: column;
				margin: 0;

				.buybtn {
					// font-size: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: right;
				}

				.sales-num {
					height: 28rpx;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #969696;
					text-align: right;
				}
			}

			.price {
				display: flex;
				flex-direction: column;

				.pro-price {
					height: 48rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					line-height: 34rpx;

					.txt {
						font-size: 28rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-overflow: ellipsis;
						box-sizing: border-box;
						white-space: nowrap;
						overflow: hidden;
						font-style: normal;
						font-weight: bold;
					}
				}

				.del-price {
					display: flex;
					align-items: center;
					height: 28rpx;
					line-height: 28rpx;

					.del-icon {
						display: inline-block;
						font-size: 20rpx;
						height: 28rpx;
						line-height: 28rpx;
					}

					.del-num {
						display: inline-block;
						font-size: 20rpx;
						height: 28rpx;
						line-height: 28rpx;
						text-decoration: line-through;
					}
				}
			}
		}

		&.scroll {
			flex-direction: row !important;
			flex-wrap: nowrap;

			.good-box {
				padding-left: 16rpx;

				.good-box-item {
					position: relative;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.good-img-box {
						height: 312rpx;
						overflow: hidden;

						.good-img {
							min-height: 100%;
						}
					}
				}

				.box-bottom {
					padding: 0 16rpx 16rpx;
					justify-content: space-between;
				}
			}

			&.one {
				flex-direction: column;

				.good-box {
					width: 592rpx;

					.good-img-box {
						overflow: hidden;
						width: 100%;
						height: 276rpx;
					}
				}
			}

			&.two {
				.good-box-item {
					width: 312rpx;
				}
			}

			&.three {
				.del-price,
				.sales-num {
					display: none !important;
				}

				.good-box-item {
					width: 204rpx;

					.good-img-box {
						width: 100%;
						height: 204rpx;
						margin-bottom: 16rpx;
					}
				}
			}
		}

		&.block {
			&.one .good-box {
				width: 100%;

				.good-box-item {
					padding-bottom: 16rpx;

					.good-img-box {
						height: 322rpx;
					}
				}
			}

			&.one .good-box:nth-child(n + 2) {
				margin-top: 16rpx;
			}

			&.two .good-box {
				width: 50%;

				.good-box-item {
					position: relative;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.good-img-box {
						height: 344rpx;
					}
				}
			}

			&.two .good-box:nth-child(odd) {
				padding-right: 8rpx;
			}

			&.two .good-box:nth-child(even) {
				padding-left: 8rpx;
			}

			&.two .good-box:nth-child(n + 3) {
				margin: 16rpx 0 0;
			}

			&.three {
				.good-box {
					width: 33.33%;

					.del-price,
					.sales-num {
						display: none;
					}

					.good-img-box {
						height: 224rpx;
						margin-bottom: 16rpx;
					}
				}

				.good-box:nth-child(n + 4) {
					margin: 16rpx 0 0;
				}

				.good-box:nth-child(3n-1),
				.good-box:nth-child(3n) {
					padding-left: 8rpx;
				}

				.good-box:nth-child(3n-2),
				.good-box:nth-child(3n-1) {
					padding-right: 8rpx;
				}
			}

			.box-bottom {
				padding: 0 16rpx 16rpx;
				justify-content: space-between;
			}
		}

		&.list .good-box {
			border-radius: 0;
			width: 100%;
			margin: 0 auto;
			flex-direction: row;
			padding: 16rpx 24rpx 0;
			margin-bottom: 20rpx;

			.right {
				height: 280rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-bottom: 16rpx;
				box-sizing: content-box;
				overflow: hidden;

				.title {
					margin-top: 0;
					padding: 0;
				}

				.subtitle {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #969696;
					padding: 0;
					margin-bottom: 22rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
					box-sizing: border-box;
				}

				.right-bottom {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					margin-bottom: 0;

					.price {
						display: flex;
						flex-direction: column;

						.pro-price {
							height: 48rpx;
						}
					}
				}
			}

			.good-box-item {
				display: flex;
			}

			.img-box {
				width: 281rpx;
				height: 281rpx;
				-ms-flex-negative: 0;
				flex-shrink: 0;
				margin-right: 16rpx;

				.good-img-box {
					height: 100%;
					display: block;

					.good-img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>
